<template>
  <div v-if="event">
    <h1>{{ event.title}}</h1>
    <p>{{ event.time }} on {{ event.date }} @ {{ event.location }}</p>
    <p>{{ event.description }}</p>
  </div>
</template>

<script lang="ts">
import type { EventCard } from '@/components/EventCard.vue';
import { defineComponent } from 'vue';
import EventService from '@/services/EventService';

export default defineComponent({
  name: 'EventDetails',
  props: {
    id: {
      type: String,
    },
  },
  data() {
    return {
      event: {} as EventCard,
    };
  },
  created() {
    const id = this.$route.params.id;
    
    if (Array.isArray(id)) {
      console.error('id为意外的数组类型');
      return;
    }
    EventService.getEvent(id)
      .then((response) => {
        this.event = response.data;
      })
      .catch((error) => {
        console.log(error);
      });
  },
});
</script>
